<template>
  <div class="ship-info mt-2">
    <div
      class="tit flexsc"
      v-if="!hidetitle"
    >
      {{ t('shipping.t1') }}
    </div>
    <div :class="['con', { 'mt-2': !hidetitle }]">
      <div class="pic">
        <img :src="data.picture" />
      </div>
      <div>
        <div class="title flexsc">
          <div class="a mr-2">{{ data.shippingName }}</div>
          <div class="b flexcc">{{ t(`dockRepair.IMOnumber`) }}:{{ data.shippingNo }}</div>
        </div>
        <div class="attr mt-2">
          <div class="item">
            <span>{{ t(`dockRepair.attr1`) }}:</span>
            <span>{{ getDictLabel('ships_type', data.shippingType) }}</span>
          </div>
          <div class="item">
            <span>{{ t('shipping.l18') }}:</span>
            <span>{{ data.grossTon }} MT</span>
          </div>
          <div class="item">
            <span>{{ t(`dockRepair.attr3`) }}:</span>
            <span>{{ data.yearOfConstruction }}</span>
          </div>
          <div class="item">
            <span>{{ t(`dockRepair.attr5`) }}:</span>
            <span>{{ getDictLabel('classification_society', data.classificationSociety) }}</span>
          </div>
          <div class="item">
            <span>{{ t(`dockRepair.attr9`) }}:</span>
            <span>{{ data.totalLength }} * {{ data.model }} * {{ data.moldedDepth }}</span>
          </div>
          <div class="item">
            <span>{{ t(`dockRepair.attr4_1`) }}:</span>
            <span>{{ data.nationality }}</span>
          </div>
          <div class="item">
            <span>{{ t(`shipping.l11`) }}:</span>
            <span>{{ data.deadweightTon }} MT</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import useDict from '@/hooks/useDict'
const { dictData, getDictData, getDictLabel } = useDict()

const { t, locale } = useI18n()
watch(locale, () => {
  init()
})
onBeforeMount(() => {
  init()
})

const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },
  hidetitle: {
    type: Boolean,
    default: false
  }
})

const init = () => {
  getDictData('ships_type')
  getDictData('classification_society')
}
</script>

<style scoped lang="scss">
.ship-info {
  background: #fff;
  padding: 24px;
  width: 100%;
  > .tit {
    border-bottom: 2px solid #252628;
    font-weight: bold;
    padding: 10px 0;
  }
  .con {
    display: grid;
    grid-template-columns: 270px auto;
    gap: 30px;
    .pic {
      img {
        width: 100%;
        height: 180px;
        object-fit: cover;
      }
    }
    .title {
      .a {
        font-size: 20px;
        font-weight: bold;
      }
      .b {
        min-width: 180px;
        padding: 0 10px;
        height: 38px;
        background: rgba($color: #3376e5, $alpha: 0.1);
        color: #3376e5;
        border-radius: 4px;
      }
    }
    .attr {
      display: grid;
      grid-template-columns: repeat(2, 50%);
      gap: 15px;
      span {
        font-size: 12px;
        &:first-of-type {
          color: #9d9fa5;
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
